<script>
import {
  computed,
  defineComponent,
  onUnmounted,
  reactive,
  ref,
  toRaw,
  watch,
  watchEffect,
} from 'vue'
import * as Antd from 'ant-design-vue'
import { logisticsQueryRegion } from '@Config/server/api'
export default defineComponent({
  emits: ['select'],
  props: {
    province: {
      type: Array(Number, String),
      default: null,
    },
    city: {
      type: Array(Number, String),
      default: null,
    },
    district: {
      type: Array(Number, String),
      default: null,
    },
  },
  setup(props, context) {
    let pre_province = computed(() => {
      return props.province
    })

    let pre_city = computed(() => {
      return props.city
    })
    let pre_district = computed(() => {
      return props.district
    })

    let province_list = reactive({ data: [] })
    let province = ref()

    let citys_list = reactive({ data: [] })
    let citys = ref()

    //district

    let district_list = reactive({ data: [] })
    let district = ref()

    let loading = reactive({
      province: true,
      citys: false,
      district: false,
    })
    //获取省份
    logisticsQueryRegion({ id: 0 }).then((_province) => {
      loading.province = false
      _province.data = _province.data.map((x) => {
        x.label = x.title
        x.value = x.adcode
        return x
      })

      province_list.data = _province.data.filter((x) => {
        return x.id != 3154 && x.id != 3153 //因数据不全，去除 ‘台湾省’和'澳门'显示
      })
      if (pre_province.value != null) {
        province.value = _province.data.filter(
          (x) => x.adcode == pre_province.value
        )[0].value //根据传的Adcode获取省份
      } else {
        province.value = province_list.data[0].value //省份默认第一项
      }
    })

    let provinceChangeHandler = (e) => {
      province.value = e
    }

    //监视省份变动
    let watch1 = watchEffect((e) => {
      if (!province.value) return
      loading.citys = true

      let _id = province_list.data.filter((x) => x.adcode == province.value)[0]
        .id
      logisticsQueryRegion({ id: _id }).then((_citys) => {
        loading.citys = false
        citys_list.data = _citys.data.map((x) => {
          x.label = x.title
          x.value = x.adcode
          return x
        })
        if (pre_city.value != null && !citys.value) {
          citys.value = pre_city.value
        } else {
          citys.value = citys_list.data[0].value
        }
      })
    })

    let citysChangeHandler = (e) => {
      citys.value = e
    }

    //监视市份变动
    let watch2 = watchEffect((e) => {
      if (!citys.value) return
      loading.district = true

      let _id = citys_list.data.filter((x) => x.adcode == citys.value)[0].id

      logisticsQueryRegion({ id: _id }).then((_district) => {
        loading.district = false

        district_list.data = _district.data.map((x) => {
          x.label = x.title
          x.value = x.adcode
          return x
        })
        if (pre_district.value != null && !district.value) {
          district.value = pre_district.value
        } else {
          district.value = district_list.data[0].value
        }
      })
    })

    let districtChangeHandler = (e) => {
      district.value = e
    }

    let watch3 = watch(
      () => district.value,
      () => {
        if (!district.value) return
        let selected_province = province_list.data.filter((x) => {
          return x.adcode == province.value
        })[0]
        let selected_city = citys_list.data.filter((x) => {
          return x.adcode == citys.value
        })[0]
        let selected_district = district_list.data.filter((x) => {
          return x.adcode == district.value
        })[0]

        context.emit('select', {
          province: { ...toRaw(selected_province) },
          city: { ...toRaw(selected_city) },
          district: { ...toRaw(selected_district) },
        })
      }
    )

    onUnmounted(() => {
      watch1()
      watch2()
      watch3()
    })

    return {
      districtChangeHandler,
      province_list,
      province,
      provinceChangeHandler,
      citys_list,
      citys,
      citysChangeHandler,
      district_list,
      district,
      loading,
    }
  },
  render() {
    return (
      <Antd.Row style={{ width: '100%' }}>
        <Antd.Col span={24}>
          <div class="selectAreaContainer">
            <div>
              <Antd.Select
                loading={this.loading.province}
                options={this.province_list.data}
                value={this.province}
                onChange={(e) => {
                  this.provinceChangeHandler(e)
                }}
              ></Antd.Select>
            </div>
            <div>
              <Antd.Select
                options={this.citys_list.data}
                loading={this.loading.citys}
                value={this.citys}
                onChange={(e) => {
                  this.citysChangeHandler(e)
                }}
              ></Antd.Select>
            </div>
            <div>
              <Antd.Select
                options={this.district_list.data}
                loading={this.loading.district}
                value={this.district}
                onChange={(e) => {
                  this.districtChangeHandler(e)
                }}
              ></Antd.Select>
            </div>
          </div>
        </Antd.Col>
      </Antd.Row>
    )
  },
})
</script>
<style scoped>
.selectAreaContainer {
  display: flex;
  width: 100%;
  overflow: hidden;
}
.selectAreaContainer > div {
  flex: 1;

  margin-right: 10px;
}
.selectAreaContainer > div:last-child {
  margin-right: 0;
}
.selectAreaContainer > div > * {
  width: 100%;
}
</style>
